<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.bootcdn.net/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet">
    <title>栅格布局</title>
    <style>
        .col-1{
            width: 8.3333334%;
            display: inline-block;
        }
        .col-2{
            width: calc(8.3333334% * 2);
            display: inline-block;
        }
        .col-3{
            width: calc(8.3333334% * 3);
            display: inline-block;
        }
        .col-4{
            width: calc(8.3333334% * 4);
            display: inline-block;
        }
        .col-5{
            width: calc(8.3333334% * 5);
            display: inline-block;
        }
        .col-6{
            width: calc(8.3333334% * 6);
            display: inline-block;
        }
        .col-7{
            width: calc(8.3333334% * 7);
            display: inline-block;
        }
        .col-8{
            width: calc(8.3333334% * 8);
            display: inline-block;
        }
        .col-9{
            width: calc(8.3333334% * 9);
            display: inline-block;
        }
        .col-10{
            width: calc(8.3333334% * 10);
            display: inline-block;
        }
        .col-11{
            width: calc(8.3333334% * 11);
            display: inline-block;
        }
        .col-12{
            width: calc(8.3333334% * 12);
            display: inline-block;
        }
        .box{
            background-color: #ccc;
            min-height: 50px;
            float: left;
        }
    </style>
</head>
<body>
    <div class="col-12 box">
        12
    </div>
    <div class="col-6 box">
        6
    </div>
    <div class="col-6 box">
        6
    </div>

    <div>
        <div class="col-4 box">
            4
        </div>
        <div class="col-4 box">
            4
        </div>
        <div class="col-4 box">
            4
        </div>
    </div>

</body>
</html>